<template>
  <div class="min-h-[790px] relative">
    <div class="flex gap-[16px]" v-if="tableData.data.length != 0">
      <div class="flex flex-col w-[402px] gap-[16px]">
        <div :class="`flex rounded-[5px] cursor-pointer ${checkedId == item.id ? 'listbgc1' : 'listbgc'} listbgc`"
          v-if="tableData.data.length != 0" v-for="(item, index) in tableData.data" :key="index"
          @click="checkedItem(item)">
          <div class=" w-[374px]  py-[24px] pl-[16px]">
            <div class="textalarm">
              <div class="flex">
                <div class="!leading-0 !text-[16px] relative line-clamp-1">
                  {{ isNullOrEmpty(item?.deviceName) }}
                  <div class="absolute bottom-[-3px] w-[100%] h-[5px] left-0 opacity-[0.5] bg-[#4583FF] "
                    style="border-radius: 2px;"></div>
                </div>
              </div>
              <div class="grid grid-cols-[auto_1fr] gap-[12px] mt-[16px] text-[14px]">
                <div class="text-[#8f98a0]">
                  设备编号
                </div>
                <div class="">
                  {{ isNullOrEmpty(item?.deviceSN) }}
                </div>
                <div class="text-[#8f98a0]">
                  告警信息
                </div>
                <div class="">
                  {{ isNullOrEmpty(item?.alarmTitle) }}
                </div>
                <div class="text-[#8f98a0]">
                  告警时间
                </div>
                <div class="">
                  {{ isNullOrEmpty(item?.createdAt) }}
                </div>
                <div class="text-[#8f98a0]">
                  位置信息
                </div>
                <div class="line-clamp-1 break-all text-ellipsis">
                  {{ isNullOrEmpty(item?.place) }}
                </div>
              </div>
            </div>
          </div>
          <div class="w-[64px] h-[32px]  mt-[16px]">
            <div class="leading-[32px] pl-[8px] text-[16px] font-bold"
              :class="item.alarmType == 1 ? 'listbg1' : item.alarmType == 2 ? 'listbg2' : item.alarmType == 3 ? 'listbg3' : 'listbg'">
              {{ isNullOrEmpty(ALARMTYPES[item.alarmType]?.label ? ALARMTYPES[item.alarmType]?.label :
                '正常') }}
            </div>
          </div>
        </div>

        <nullpng v-else />
        <div class=" w-[100%]  flex-c">
          <div class="absolute bottom-[16px]">
            <el-pagination v-model:current-page="searchFrom.page" v-model:page-size="searchFrom.limit" background
              :layout="PAGE_LAYOUTLEFTS" :total="tableData.total" @size-change="getTableList" :pager-count="5"
              size="small" style="color: #fff;" @current-change="getTableList" />
          </div>
        </div>
      </div>
      <div class="flex-1 min-h-[790px] info-box flex flex-col gap-[16px]">
        <div class="flex-1 relative">
          <box :title="isNullOrEmpty(alarmInfo?.projectName)">
            <template #title-right>
              <div class="w-[80px] h-[32px] cursor-pointer leading-[32px] px-[10px] rounded-[4px] but"
                @click="alarmHandling">
                告警处理
              </div>
            </template>
            <div class="w-full h-full relative flex gap-[16px]">
              <div class="flex-[29] relative pt-[10px]">
                <div class="p-[20px] relative bg-[rgba(10,30,57,.4)] h-full rounded-[5px]">
                  <div class="w-full flex">
                    <div class="flex-1 flex flex-col gap-[10px]">
                      <div class="text-[14px] text-[#8F98A0]">
                        确认状态
                      </div>
                      <div class="box-tag">
                        <el-tag :type="CONFIRMSTATUSTEXT[alarmInfo.confirm]?.type" :key="alarmInfo.confirm">
                          {{ CONFIRMSTATUSTEXT[alarmInfo.confirm]?.label }}
                        </el-tag>
                      </div>
                    </div>
                    <div class="flex-1 flex flex-col gap-[10px]">
                      <div class="text-[14px] text-[#8F98A0]">
                        处理状态
                      </div>
                      <div class="box-tag">
                        <el-tag :type="HANDLESTATUSTEXT[alarmInfo?.dealStatus]?.type" :key="alarmInfo?.dealStatus">
                          {{ isNullOrEmpty(HANDLESTATUSTEXT[alarmInfo?.dealStatus]?.label) }}
                        </el-tag>
                      </div>
                    </div>
                    <div class="flex-1 flex flex-col gap-[10px]">
                      <div class="text-[14px] text-[#8F98A0]">
                        事件等级
                      </div>
                      <div class="box-tag">
                        <el-tag :type="EVENTLEVELS[alarmInfo?.alarmLevel]?.type">
                          {{ isNullOrEmpty(EVENTLEVELS[alarmInfo?.alarmLevel]?.label) }}
                        </el-tag>
                      </div>
                    </div>
                    <div class="flex-1 flex flex-col gap-[10px]">
                      <div class="text-[14px] text-[#8F98A0]">
                        告警类型
                      </div>
                      <div class="box-tag">
                        <el-tag :type="ALARMTYPES[alarmInfo?.alarmType]?.type" :key="alarmInfo?.alarmType">
                          {{ ALARMTYPES[alarmInfo?.alarmType]?.label }}
                        </el-tag>
                      </div>
                    </div>
                  </div>
                  <div class="mt-[16px]">
                    <el-descriptions :column="1">
                      <el-descriptions-item label="产品类型">
                        <div class="text-[14px] gradient-text">
                          {{ isNullOrEmpty(alarmInfo?.productName) }}
                        </div>
                      </el-descriptions-item>
                      <el-descriptions-item label="告警事件">
                        <div class="text-[14px]">
                          {{ isNullOrEmpty(alarmInfo?.alarmTitle) }}
                        </div>
                      </el-descriptions-item>
                      <el-descriptions-item label="告警时间">
                        <div class="text-[14px]">
                          {{ isNullOrEmpty(alarmInfo?.createdAt) }}
                        </div>
                      </el-descriptions-item>
                      <el-descriptions-item label="所属单位">
                        <div class="text-[14px]">
                          {{ isNullOrEmpty(alarmInfo?.unityName) }}
                        </div>
                      </el-descriptions-item>
                      <el-descriptions-item label="设备编号">
                        <div class="text-[14px]">
                          {{ isNullOrEmpty(alarmInfo?.deviceSN) }}
                        </div>
                      </el-descriptions-item>
                      <el-descriptions-item label="所属建筑">
                        <div class="text-[14px]">
                          {{ isNullOrEmpty(alarmInfo?.buildingName) }}
                          {{ isNullOrEmpty(alarmInfo?.drawingName) }}
                        </div>
                      </el-descriptions-item>
                    </el-descriptions>

                  </div>
                </div>
              </div>
              <div class="flex-[40] relative">
                <!-- {{ alarmInfo }} -->
                <maplocation :alarmInfo="alarmInfo" />
              </div>
            </div>
          </box>
        </div>
        <div class="flex-1 relative flex gap-[16px]">
          <div class="flex-[29] relative">
            <box title="通知记录">
              <div class="w-full h-[320px] relative pt-[10px]">
                <div class="relative bg-[rgba(10,30,57,.4)] h-full rounded-[5px] flex flex-col"
                  v-if="noticeList && noticeList.length > 0">
                  <div class="flex py-[20px] listborder mx-[16px] leading-[14px] text-[14px]  text-[#8F98A0]">
                    <div class="flex-1">通知方式</div>
                    <div class="flex-1">通知状态</div>
                    <div class="flex-1">通知人</div>
                    <div class="flex-[2]">通知时间</div>
                  </div>
                  <div class="flex-1 h-0 relative">
                    <el-scrollbar>
                      <div class="flex-c py-[20px] mx-[16px] leading-[14px] text-[14px]"
                        v-for="(item, index) in noticeList" :key="index">
                        <div class="flex-1">
                          {{ isNullOrEmpty(NOTIFICATIONTYPE[item?.noticeType]) }}
                        </div>
                        <div class="flex-1">
                          <div class="box-tag">
                            <el-tooltip :content="isNullOrEmpty(item?.failMessage)" placement="top"
                              :disabled="item?.status == 1">
                              <el-tag :type="item?.status === 1 ? 'success' : 'danger'">
                                {{
                                  isNullOrEmpty(NOTIFICATIONSTATUSTEXT[item?.status]?.label)
                                }}
                              </el-tag>
                            </el-tooltip>

                          </div>
                        </div>
                        <div class="flex-1">
                          {{ isNullOrEmpty(item?.noticeUser) }}
                        </div>
                        <div class="flex-[2]">{{ isNullOrEmpty(item?.createdAt) }}</div>
                      </div>
                    </el-scrollbar>
                  </div>
                </div>
                <div class="h-full relative bg-[rgba(10,30,57,.4)]" v-else>
                  <nullpng />
                </div>
              </div>
            </box>
          </div>
          <div class="flex-[40] relative">
            <box title="实时监控">
              <div class="w-full h-[320px] relative pt-[10px] flex-c">
                <div
                  class="absolute top-[20px] right-[20px] flex bg-[rgba(11,33,77,.8)] rounded-[4px] z-[10] cursor-pointer text-[#9DA7BC]">
                  <div :class="`p-[10px] rounded-l-[4px] ${!showVideo ? 'bg-[#2F5DBA] text-[#fff]' : ''}`"
                    @click="changeShowVideo(false)">抓拍照片</div>
                  <div :class="`p-[10px] rounded-r-[4px] ${showVideo ? 'bg-[#2F5DBA] text-[#fff]' : ''}`"
                    @click="changeShowVideo(true)">实时监控</div>
                </div>
                <div class="flex-c flex-1 h-full relative bg-[rgba(10,30,57,.4)]" v-if="showVideo">
                  <div class="h-full relative" v-show="alarmInfo?.moniterUrl">
                    <div id="mse" class="!w-full  !h-full aspect-video"></div>
                  </div>
                  <div v-show="!alarmInfo?.moniterUrl" class="h-full aspect-video relative flex-c">
                    暂无视频...
                  </div>
                </div>
                <div class="flex-c flex-1 h-full relative" v-else>
                  <template v-if="alarmInfo?.img">
                    <el-image class="h-full w-full object-contain" :src="alarmInfo?.img[0]" fit="fill" loading="lazy">
                      <template #error>
                        <div
                          class="w-[100%] h-[100%] flex  justify-center items-center flex-col aspect-video bg-[rgba(10,30,57,.4)]">
                          <div class="w-[60px] h-[60px]">
                            <img :src="imgs" alt="" class="w-[60px] h-[60px] " />
                          </div>
                          <div class="mt-[8px] text-[b5bccd]">暂无图片...</div>
                        </div>
                      </template>
                    </el-image>
                    <!-- <img class="h-full aspect-video object-contain" v-if="imgShow" :src="alarmInfo?.img[0]"
                      @error="imgError"></img>
                    <div v-else class="w-[100%] h-[100%] flex  justify-center items-center flex-col aspect-video">
                      <div class="w-[60px] h-[60px]">
                        <img :src="imgs" alt="" class="w-[60px] h-[60px] " />
                      </div>
                      <div class="mt-[8px] text-[b5bccd]">暂无图片...</div>
                    </div> -->
                  </template>
                  <div class="h-full aspect-video" v-else>
                    <nullpng />
                  </div>
                </div>
              </div>
            </box>
          </div>
        </div>
      </div>
    </div>
    <div class="w-full h-[790px] relative" v-else>
      <nullpng />
    </div>
  </div>
</template>
<script setup lang="ts">
import imgs from '@/assets/screenimg/null1.png'
import { isNullOrEmpty } from '@/utils/functions'
import Player, { Events } from 'xgplayer';
import 'xgplayer/dist/index.min.css';
import HlsPlugin from 'xgplayer-hls'
import maplocation from "./maplocation.vue"
import { NOTIFICATIONSTATUS, NOTIFICATIONSTATUSTEXT, NOTIFICATIONTYPE } from "@/constant/alarm-mangenment";
import nullpng from '@/views/large-data-screen/menu-content/null-png.vue'
import { getAlarmDetail, getAlarmHandle, getAlarmRecord, getDeviceVideo, getAlarmRecordListOps } from "@/api/screen";
import { PAGE_LAYOUTLEFTS, } from "@/constant";
import alarmHand from '@/views/large-data-screen/component/alarmHand.vue'
import { ALARMTYPES, CONFIRMSTATUSTEXT, HANDLESTATUSTEXT, DEVICEPOSITIONTEXT, EVENTLEVELS } from "@/constant/alarm-mangenment";
import { addDialog } from "@/components/ReDialog";
import { message } from "@/utils/message";
import { emitter } from '@/utils/mitt'
import box from '../../component/box.vue';

const props = defineProps({
  closePopup: {
    type: Function,
    default: () => { }
  },
  closeSound: {
    type: Function,
    default: () => { }
  }
})

const player = ref(null);
const checkedId = ref(null)
const formRef = ref()
const noticeList = ref([])
const showVideo = ref(false)
const tableData = reactive({
  data: [],
  total: 0
});
const searchFrom = ref({
  page: 1,
  limit: 4
});
const alarmInfo = ref({} as any)
const defour = () => {
  return {
    id: alarmInfo.value.id,
    confirm: null,
    dealStatus: null,
    dealView: null,
    sellMethod: null,
    processId: null,
    handleUid: null,
    noticeType: []
  };
};
const imgShow = ref(true)
const timer = ref(null)
onMounted(() => {
  getTableList()
  // emitter.on('alarmEvents', reList)
})
onBeforeUnmount(() => {
  // emitter.off('alarmEvents', reList)
  timer.value && clearTimeout(timer.value)
})
const reList = () => {
  searchFrom.value = {
    page: 1,
    limit: 4
  }
  checkedId.value = null
  getTableList()
}
const getTableList = () => {
  getAlarmRecord(searchFrom.value).then(res => {
    tableData.data = res.result.data
    tableData.total = res.result.total
    if (res.result.data.length > 0 && (!checkedId.value || res.result.data.map(item => item.id).indexOf(checkedId.value) == -1)) {
      checkedItem(res.result.data[0])
    }
    if (res.result.total == 0) {
      props.closeSound()
      message(`暂无告警事件`, { type: "warning" });
      setTimeout(() => {
        props.closePopup()
      }, 1000)
    }
  })
}
const checkedItem = (item) => {
  checkedId.value = item.id
  getAlarmDetail({ id: checkedId.value }).then(res => {
    alarmInfo.value = res.result
    getAlarmRecordListOps({ alarmId: alarmInfo.value.id }).then(res => {
      noticeList.value = res.result.data
    })
    if (showVideo.value) {
      loadVideo()
    }
    imgShow.value = true
  })
}
const changeShowVideo = (e) => {
  showVideo.value = e
  if (e) {
    loadVideo()
  }
}
const loadVideo = () => {
  getDeviceVideo({ deviceId: alarmInfo.value.deviceId }).then(res => {
    alarmInfo.value.moniterUrl = res.result.url
    player.value = new Player({
      id: 'mse',
      url: alarmInfo.value.moniterUrl,
      plugins: [HlsPlugin],
    })

    player.value.on(Events.PLAY, () => {
      if (res.result.playDuration) {
        timer.value && clearTimeout(timer.value)
        timer.value = setTimeout(() => {
          player.value.pause()
        }, res.result.playDuration * 60 * 1000);
      }
    })
  })
}
const alarmHandling = () => {
  if (!alarmInfo.value.id) {
    message(`请先选择告警事件`, {
      type: "warning"
    });
    return
  }
  addDialog({
    title: `告警处理`,
    width: "400px",
    draggable: true,
    fullscreen: false,
    fullscreenIcon: true,
    props: {
      id: alarmInfo.value.id,
      projectId: alarmInfo.value.projectId,
    },
    closeOnClickModal: false,
    contentRenderer: () => h(alarmHand, { ref: formRef }),
    openAutoFocus({ options }) {
      options.props = {
        isLoading: false,
        id: alarmInfo.value.id,
        projectId: alarmInfo.value.projectId,
        formInlines: defour()
      };
    },
    beforeSure: (done, { options }) => {
      const FormRefsa = formRef.value.getRef();
      const formData = options.props.formInlines;
      function chores() {
        message(`操作成功`, {
          type: "success"
        });
        done();
        checkedItem(alarmInfo.value)
      }
      FormRefsa.validate(valid => {
        if (valid) {
          getAlarmHandle(formData).then(res => {
            getTableList()
            chores()
          }).catch(err => {
            if (err !== "请求中") {
              options.props.isLoading = false;
            }
          });
        }
      });
    }
  });
}
const imgError = () => {
  console.log(alarmInfo.value?.img);
  imgShow.value = false
}
defineExpose({
  reList
})
</script>
<style lang="scss" scoped>
.el-descriptions__body .el-descriptions__table:not(.is-bordered) .el-descriptions__cell {
  padding-bottom: 12px !important;
}

.but {
  background: rgba(17, 33, 65, 0.8);
  border: 1px solid #4583FF;
}

.listbg {
  background: linear-gradient(90deg, rgba($color: #3a7e32, $alpha: 0.2) 0%, rgba(0, 0, 0, 0) 100%);
  color: rgba(37, 176, 19, 1);
  border-left: 2px solid rgba(37, 176, 19, 1);
}

.listbg1 {
  background: linear-gradient(90deg, rgba($color: #F03232, $alpha: 0.2) 0%, rgba(0, 0, 0, 0) 100%);
  color: rgba(240, 50, 50, 1);
  border-left: 2px solid rgba(240, 50, 50, 1);
}

.listbg2 {
  background: linear-gradient(90deg, rgba($color: #D8722F, $alpha: 0.2) 0%, rgba(0, 0, 0, 0) 100%);
  color: rgba(224, 117, 46, 1);
  border-left: 2px solid rgba(224, 117, 46, 1);
}

.listbg3 {
  color: rgba(173, 173, 173, 1);
  background: linear-gradient(90deg, rgba($color: #ADADAD, $alpha: 0.2) 0%, rgba(0, 0, 0, 0) 100%);
  border-left: 2px solid rgba(173, 173, 173, 1);
}

.listbgc {
  background-color: rgba($color: #292E48, $alpha: 0.4);
  border: 1px solid rgba(255, 255, 255, 0);
}

.listbgc1 {
  // background: linear-gradient(180deg, #1d2235 0%, #234383 100%);
  // border: 1px solid;
  // border-image: linear-gradient(to top, #4583ff, #24293F) 1;
  // clip-path: inset(0 round 4px);
  border: 1px solid rgba(240, 50, 50, .3);
  position: relative;

  &::before {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 40px 0 rgba(240, 50, 50, 0.8);
    background-color: rgba($color: #340707, $alpha: 0.3);
    z-index: -1;
  }
}

.my-class {
  // width: 100px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  word-break: break-all;
}

.info-box {
  position: relative;
  border-radius: 4px;
  border: 1px solid rgba(240, 50, 50, .3);
  padding: 20px;

  &::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 4px;
    box-shadow: inset 0 0 20px 0 rgba(240, 50, 50, .3);
    background-color: rgba($color: #2A1414, $alpha: 0.3);
    z-index: -1;
  }

  ::v-deep .box {
    background-color: rgba($color: #000000, $alpha: 0);
    border: 0;

    .box-tag {
      display: flex;

      span {
        display: inline-flex;
      }
    }
  }
}

.listborder {
  border-bottom: 1px solid #32374D;
}
</style>
